<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: ['data'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()
      let XData = [
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
      ]
      let valueData = [
        {
          name: '席位1',
          value: [30, 39, 29, 28, 29, 28, 79],
        },
        {
          name: '席位2',
          value: [80, 86, 40, 40, 40, 40, 99],
        },
        {
          name: '席位3',
          value: [40, 50, 29, 28, 30, 35, 66],
        },
      ]
      let colorList = ['#5084E2', '#F47C59', '#48D4C4']
      let series = []
      valueData.forEach((e, i) => {
        series.push({
          name: e.name,
          type: 'line',
          symbol: 'none',
          data: e.value,
          color: colorList[i],
          markLine: {
            symbol: 'none', //去掉箭头
            label: {
              show: true,
              color: '#fff',
              position: 'start',
              formatter: '{b}',
              backgroundColor: '#D5AC14',
              padding: [2, 5, 2, 5],
            },
            // 鼠标高亮颜色
            emphasis: {
              show: false,
              // label: {
              //   color: '#000',
              //   show: true,
              //   formatter: '{b}',
              // },
              // lineStyle: {
              //   color: '#b19046',
              //   type:'dashed'
              // },
            },
            lineStyle: {
              type: 'dashed',
              color: '#ddb761',
            },
            data: [
              {
                name: '34',
                yAxis: 34,
              },
            ],
          },
        })
      })
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'axis',
          // axisPointer: {
          //   // 坐标轴指示器，坐标轴触发有效
          //   type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          // },
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '15%',
          containLabel: true,
        },
        // legend: {
        //   right: '2%',
        //   top: '5%',
        //   textStyle: {
        //     color: '#666666',
        //   },
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 25,
        // },
        xAxis: {
          type: 'category',
          name: '时间',
          nameLocation: 'end',
          nameGap: '0',
          nameTextStyle: {
            color: '#fff',
          },
          data: XData,
          axisLine: {
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2F2F2F',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#99A0A8',
            },
          },
        },
        yAxis: [
          {
            name: '条',
            nameTextStyle: {
              color: '#fff',
            },
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#99A0A8',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#2F2F2F',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2F2F2F',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: series,
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
